<template>
  <div class="ps_info">
    <loading v-if="!userInfoData" />
    <div class="info-text" v-else-if="!userInfoData.userName">
      <p>
        <i class="el-icon-user"></i>
      </p>
      <p>
        没有获取到您的
        <span>个人资料</span>数据，请前往导航栏的管理数据-
        <span>个人资料</span>版块进行完善。
      </p>
      <p>
        <router-link to="/users/gm_info">或者点击这里完善资料</router-link>
      </p>
      <div style="color: red">注意： 请在上传其他资料之前，先完善个人资料，否则数据会出现错误。</div>
    </div>
    <div class="content" v-else>
      <div class="label">
        <span>个人档</span>
      </div>
      <div class="user-data">
        <el-drawer :visible.sync="coverDrawer" :with-header="false" size="30%" class="cover-drawer">
          <div class="title">
            <span>修改头像图片</span>
          </div>
          <el-upload
            class="upload-demo"
            action
            list-type="picture-card"
            :http-request="addAttachment"
            :limit="limitNum"
            :before-upload="beforeAvatarUpload"
            ref="upload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="btn">
            <el-button @click="submitForm">上传头像</el-button>
          </div>
          <div class="info">
            <span>
              图片的大小不能超过1MB、
              且图片的格式只能为jpg或者png
            </span>
          </div>
        </el-drawer>
        <div class="cover" @click="editCoverUrl">
          <img :src="userInfoData.coverUrl | squareUrls" alt />
          <div class="cover-edit">
            <i class="el-icon-edit-outline"></i>
          </div>
        </div>
        <div class="ctx">
          <div class="name">{{ userInfoData.name }}</div>
          <div class="other">
            <span>性别：{{ userInfoData.sex }}</span>
            <span>出生日期：{{ userInfoData.date | setDate | changeDate}}</span>
            <span>资料状态：{{ userInfoData.secrecy === false ? "公开" : "保密" }}</span>
          </div>
          <div class="work" v-if="userInfoData.work">
            <span>工作：{{ userInfoData.work }}</span>
          </div>
          <div class="address" v-if="userInfoData.address">
            <span>所在地：{{ userInfoData.address }}</span>
          </div>
        </div>
      </div>
      <div class="more-info">
        <ul>
          <li>
            <h3>说说</h3>
            <p>{{ userInfoData.ssDataNumber }}</p>
          </li>
          <li>
            <h3>日志</h3>
            <p>{{ userInfoData.rzDataNumber }}</p>
          </li>
          <li>
            <h3>照片</h3>
            <p>{{ userInfoData.photosNumber }}</p>
          </li>
          <li>
            <h3>相册</h3>
            <p>{{ userInfoData.albumNumber }}</p>
          </li>
          <li>
            <h3>视频</h3>
            <p>{{ userInfoData.videoNumber }}</p>
          </li>
          <li>
            <h3>视频库</h3>
            <p>{{ userInfoData.videosNumber }}</p>
          </li>
          <li>
            <h3>技术文章</h3>
            <p>{{ userInfoData.skillNumber }}</p>
          </li>
          <li>
            <h3>积分</h3>
            <p>{{ userInfoData.integral }}</p>
          </li>
          <li>
            <h3>会员等级</h3>
            <p>{{ userInfoData.class }}</p>
          </li>
          <li>
            <h3>账号状态</h3>
            <p>{{ userInfoData.state ===0 ? "正常" : "异常" }}</p>
          </li>
        </ul>
      </div>
      <div class="like-text">
        <div class="declaration">
          <h1>
            <span>个人宣言</span>
            <el-tooltip effect="dark" content="修改个人宣言" placement="top-start">
              <i style="outline: none" @click="_setDeclarationData()" class="el-icon-edit"></i>
            </el-tooltip>
          </h1>
          <p>{{declaration}}</p>
        </div>
        <div class="qd">
          <button class="qd-date" :disabled="disabled" @click="qd()">
            <p>2019.12.04</p>
            <p>{{qdText}}</p>
          </button>
          <div class="qd-number">
            <p>总签到次数</p>
            <p>{{qdNumber}}</p>
          </div>
        </div>
      </div>
      <div class="updata-note-book">
        <div class="note-book">
          <h1>记事本</h1>
          <el-tooltip effect="dark" content="添加记事本项" placement="top-start">
            <i style="outline: none" @click="_addNoteBook()" class="el-icon-edit"></i>
          </el-tooltip>
        </div>
        <div class="note-book-wrapper">
          <el-table
            :data="allNoteBook"
            style="width: 100%;"
            height="320"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column type="index" :index="indexMethod" label="完成状态" sortable width="200"></el-table-column>
            <el-table-column prop="text" label="事件"></el-table-column>
            <el-table-column label="修改状态" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">切换完成状态</el-button>
                <el-button size="mini" type="danger" @click="delectData(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userUrl } from "@/public/uri.js";
import { mapState, mapActions } from "Vuex";
export default {
  name: "ps_info",
  data() {
    return {
      sizeList: ["large", "medium", "small"],
      disabled: false,
      declaration: "",
      coverDrawer: false,
      fileData: "",
      limitNum: 1,
      qdText: "签到"
    };
  },
  // watch: {
  //   ssData() {
  //     console.log(1);

  //     // this.getUserInfoData(this.userName);
  //   },
  //   rzData() {
  //     this.getUserInfoData(this.userName);
  //   },
  //   albumsData() {
  //     this.getUserInfoData(this.userName);
  //   },
  //   userName() {
  //     if (this.userName) {
  //       this.getUserInfoData(this.userName);
  //     }
  //   }
  // },
  watch: {
    userName() {
      if (this.userName) {
        this.allMethods();
      }
    }
  },
  mounted() {
    if (this.userName) {
      this.allMethods();
    } else {
      this.$router.push("/blogs/blog_index");
    }
    // this.inter = setInterval(this.lookInitInfoData, 20);
  },
  computed: {
    ...mapState("user", [
      "ssData",
      "rzData",
      "userInfoData",
      "userName",
      "qdNumber",
      "allNoteBook"
    ])
  },
  filters: {
    initDate(data) {
      return new Date(data)
        .toLocaleString("chinese", { hour12: false })
        .split(" ")[0];
    },
    changeDate(data) {
      return data.split(" ")[0];
    }
  },
  methods: {
    indexMethod(value) {
      return this.allNoteBook[value].flog === false ? "未完成" : "已完成";
    },
    _addNoteBook() {
      // 添加记事本的内容
      this.$prompt("请输入要记录的内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          if (value) {
            this.setNoteBookData({
              text: value,
              userName: this.userName
            })
              .then(res => {
                if (res.data.ok === 1) {
                  this.getNoteBookData({
                    userName: this.userName
                  });
                } else {
                  alert(res.data.data);
                }

                // this._getDeclarationData(this.userName);
                // alert("数据修改成功！");
              })
              .catch(err => {
                console.log("错误信息：" + err);
              });
          } else {
            alert("检测内容为空，未提交数据！");
          }
        })
        .catch(err => {
          console.log("你取消了操作");
        });
    },
    allMethods() {
      this.getUserInfoData(this.userName);
      this._getDeclarationData(this.userName);
      this.getQd({ userName: this.userName });
      this.getNoteBookData({
        userName: this.userName
      });
      this.initQdStore({ userName: this.userName })
        .then(res => {
          this.qdText = res.data.data;
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    },
    submitForm() {
      let fileData = this.fileData;
      if (this.fileData) {
        let fromData = new FormData();
        fromData.append("image", fileData);
        fromData.append("userName", this.userName);
        this.toggleCoverUrl(fromData)
          .then(res => {
            if (res.data.ok === 1) {
              this.coverDrawer = false;
              this.$refs.upload.clearFiles();
              this.getUserInfoData(this.userName);
              alert(res.data.data);
            }
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      } else {
        alert("请选择一张图片");
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png" || file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    addAttachment(file) {
      this.fileData = file.file;
    },
    editCoverUrl() {
      this.coverDrawer = true;
    },
    _setDeclarationData() {
      this.$prompt("请输入个人宣言（不超过30个字符）", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{0,30}$/,
        inputErrorMessage: "不能超过30个字符"
      })
        .then(({ value }) => {
          if (value) {
            this.setDeclarationData({
              text: value,
              userName: this.userName
            })
              .then(res => {
                this._getDeclarationData(this.userName);
                this.$alert("数据修改成功！");
              })
              .catch(err => {
                console.log("错误信息：" + err);
              });
          } else {
            this.$alert("检测内容为空，未提交数据！");
          }
        })
        .catch(err => {
          console.log("你取消了操作");
        });
    },
    _getDeclarationData(userName) {
      this.getDeclarationData(userName)
        .then(res => {
          if (res.data.ok === 1) {
            this.declaration = res.data.data.text;
          } else {
            this.declaration = res.data.data;
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    },
    handleEdit(data) {
      this.toggleNoteBookStatus({
        id: data._id
      })
        .then(res => {
          if (res.data.ok === 1) {
            this.getNoteBookData({
              userName: this.userName
            });
          }
        })
        .catch(err => {
          console.log("错误提示：" + err);
        });
    },
    delectData(data) {
      this.delectNoteBookData({
        id: data._id
      })
        .then(res => {
          if (res.data.ok === 1) {
            this.getNoteBookData({
              userName: this.userName
            });
            alert(res.data.data);
          }
        })
        .catch(err => {
          console.log("错误提示：" + err);
        });
    },
    qd() {
      this.setQd({ userName: this.userName })
        .then(res => {
          if (res.data.ok === 1) {
            this.getUserInfoData(this.userName);
            this.getQd({ userName: this.userName });
            this.initQdStore({ userName: this.userName })
              .then(res => {
                this.qdText = res.data.data;
              })
              .catch(err => {
                console.log("错误信息：" + err);
              });
            alert(res.data.data);
          } else {
            alert(res.data.data);
          }
        })
        .catch(err => {
          console.log("错误信息：" + err);
        });
    },
    ...mapActions("user", [
      "getSsData",
      "getRzData",
      "getSpData",
      "getUserInfoData",
      "getDeclarationData",
      "setDeclarationData",
      "toggleCoverUrl",
      "setQd",
      "getQd",
      "initQdStore",
      "setNoteBookData",
      "getNoteBookData",
      "toggleNoteBookStatus",
      "delectNoteBookData"
    ])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.ps_info
  width: 100%
  height: 100%
  background-color: #fff
  .info-text
    width: 100%
    height: 100%
    padding: 20%
    @include align(flex-start)
    >p
      flex: 0 0 100%
      width: 100%
      height: 40px
      line-height: 40px
      font-size: 16px
      overflow: hidden
      >a
        color: #0487dc
        &:hover
          color: #2eb037
      >i
        font-size: 24px
      >span
        color: #2eb037
  .content
    width: 100%
    height: 100%
    padding: 0 10px
    overflow: hidden
    .label
      width: 100%
      line-height: 50px
      height: 50px
      padding: 0 10px
      background-color: #ccc
      font-size: 18px
      font-weight: 700
      color: #666
    .user-data
      width: 100%
      height: 140px
      overflow: hidden
      padding: 0 5%
      border-bottom: 1px solid #eee
      @include flex(flex-start,center)
      .cover
        flex: 0 0 80px
        height: 80px
        border-radius: 5px
        overflow: hidden
        position: relative
        @include flex(center,center)
        >img
          width: 100%
        .cover-edit
          opacity: 0
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          background-color: rgba(0,0,0,.6)
          transition: opacity .3s
          @include flex(center,center)
          >i
            font-size: 21px
            color: #fff
        &:hover
          .cover-edit
            opacity: 1
            transition: opacity .3s

      .ctx
        flex: 1
        height: 80px
        padding-left: 2%
        .name
          width: 100%
          height: 20px
          line-height: 20px
          color: #000
        .other
          width: 100%
          height: 20px
          @include flex(space-between,center)
          >span
            display: block
        .work, .address
          width: 100%
          height: 20px
          line-height: 20px    
    .more-info
      width: 100%
      height: 80px      
      >ul
        width: 100%
        height: 100%
        padding: 10px 0  
        border-bottom: 1px solid #eee
        @include flex(flex-start,center)
        >li
          flex: 1     
          height: 100%
          @include align(center) 
          >h3
            flex: 0 0 100%
            height: 60%
            @include flex(center,center)
          >p
            flex: 0  0 100%
            height: 40%
            @include flex(center,center)
    .like-text
      width: 100%
      height: 140px
      border-bottom: 1px solid #eee
      @include flex(flex-start,center)
      .declaration
        flex: 1
        overflow: hidden
        padding: 5px
        >h1
          border-left: 10px solid rgba(46, 176, 55, 0.8)
          padding-left: 10px
          height: 19px
          line-height: 19px
          font-size: 19px
          margin: 10px 0
          @include flex(flex-start,center)
          >span
            flex: 0 0 20%
          .el-tooltip
            cursor: pointer
        p
          line-height: 20px
          padding: 10px
          text-indent: 1em
      .qd
        flex: 0 0 30%
        height: 80px
        padding: 0 2% 0 0   
        @include flex(flex-start,flex-start)
        .qd-date
          flex: 0 0 30%
          height: 100%
          background-color: #f5d0dc
          cursor: pointer
          @include align(center)
          p
            line-height: 20px
            flex: 0 0 100%
            text-align: center
            color: #c35673
            &:last-child
              font-size: 16px
        .qd-number
          flex: 1
          height: 100%
          border: 1px solid #dcdcdc
          @include align(center)
          >p
            flex: 0 0 100%
            line-height: 30px
            padding-left: 20%
            color: #c35673
            &:last-child
              font-size: 16px
          &:hover
            background-color: #F56C6C
            >p
              color: #fff
    .updata-note-book
      width: 100%
      height: 350px
      padding-top: 10px
      .note-book
        width: 100%
        height: 40px
        line-height: 40px
        padding: 5px
        overflow: hidden
        @include flex(flex-start,flex-start)
        >h1
          border-left: 10px solid rgba(46, 176, 55, 0.8)
          padding-left: 10px
          height: 19px
          line-height: 19px
          font-size: 19px
          margin: 10px 0
        .el-tooltip
          margin-left: 75px
          height: 100%
          font-size: 18px
          margin-top: 5px
          @include flex(center,center)
      .note-book-wrapper
        padding: 0 10px
</style>


<style lang="sass">    
.cover-drawer
  width: 100%
  height: 100%
  .title
    margin-top: 50px
    width: 100%
    height: 40px
    line-height: 40px
    font-size: 21px
    position: relative
    &:before
      width: 5px
      height: 21px
      background-color: #eb2001
      position: absolute
      left: 0
      content: ""
      top: 9px
    >span
      margin-left: 20px
  .upload-demo
    padding: 5%
    width: 100%
    height: 300px
  .btn
    padding: 5%
  .info
    padding: 5%
    margin-top: 100px
</style>